<script setup lang="ts">
import { Search } from "@px-ui/icons-vue";
import { useThrottleFn } from "@vueuse/core";
import { throttleDelay as delay } from "@/utils/constant";

interface Props {
  formRef?: CommonSearch.SearchFormRefType;
}

const props = withDefaults(defineProps<Props>(), {});

const emit = defineEmits(["submit", "reset"]);

const throttleSubmit = useThrottleFn(async () => {
  if (!props.formRef) return null;
  await props.formRef.validate(valid => {
    if (valid) {
      emit("submit");
    }
  });
}, delay);

const throttleReset = useThrottleFn(() => {
  if (!props.formRef) return null;
  props.formRef.resetFields();
  props.formRef.clearValidate();
  emit("reset");
}, delay);
</script>

<template>
  <div class="search-buttons-content">
    <px-button type="primary" :icon="Search" @click="throttleSubmit">查询</px-button>
    <px-button @click="throttleReset">重置</px-button>
    <slot />
  </div>
</template>

<style lang="scss" scoped>
.search-buttons-content {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
</style>
